<template>
  <div class="c-bg-white">
    <div class="c-hh190 c-bg-rank c-w100 c-pt52 c-p">
      <p class="c-fs28 c-fc-xblack c-textAlign-c">您目前处于第{{myRanking.myranking}}名</p>
      <div class="c-w90 c-pa c-p-lp5 c-hh120 c-p-t120 c-br10 c-bg-white shadow-rank c-flex-row c-aligni-center">
        <div class="c-flex-row c-aligni-center c-ph24 c-w100">
          <div class="c-fs24 c-fc-xblack c-w14">{{myRanking.myranking}}</div>
          <div class="c-flex-row c-aligni-center c-w45">
            <img :src="$addXossFilter(myRanking.headimgurl, require('@/assets/defult_head.png'))" class="c-ww60 c-hh60 c-brp50" alt="" />
            <div class="c-fs24 c-fc-xblack c-ml12 c-text-ellipsis1">{{myRanking.nickname}}</div>
          </div>
          <div class="c-w18 c-textAlign-c c-ml12">
            <div class="c-fs18 c-fc-sxblack">{{scoringMethod==1?'正确率':scoringMethod==2?'总分':'答对题数'}}</div>
            <div class="c-fs24 c-fc-xblack c-hh48 c-lh48" v-if="scoringMethod==1">{{myRanking.accuracy}}%</div>
            <div class="c-fs24 c-fc-xblack c-hh48 c-lh48" v-if="scoringMethod==2">{{myRanking.totalpoins}}</div>
            <div class="c-fs24 c-fc-xblack c-hh48 c-lh48" v-if="scoringMethod==3">{{myRanking.rightNum}}</div>
          </div>
          <div class="c-w22 c-textAlign-r">
            <div class="c-fs18 c-fc-sxblack">用时</div>
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-hh48 c-lh48">{{myRanking.ansTime}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-pb16 c-mt90">
      <div class="c-flex-row c-ph24 c-mt40 c-aligni-center" v-for="(item,index) in rankList" :key="index">
        <div class="c-fs24 c-fc-xblack c-w14">
          <img class="c-ww32 c-ml10" v-if="index==0" src="../../../assets/i/wap/exam/jinpai.png" alt="" />
          <img class="c-ww32 c-ml10" v-else-if="index==1" src="../../../assets/i/wap/exam/yinpai.png" alt="" />
          <img class="c-ww32 c-ml10" v-else-if="index==2" src="../../../assets/i/wap/exam/tongpai.png" alt="" />
          <span v-else class="c-ml20">{{index+1}}</span>
        </div>
        <div class="c-fs24 c-fc-xblack c-w45 c-textAlign-c c-flex-row c-aligni-center c-pr20">
          <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-ww60 c-hh60 c-brp50" alt="" />
          <div class="c-fs24 c-fc-xbalck c-ml12 c-textAlign-l">{{item.nickname=='' || item.nickname==null ? '未知' : item.nickname}}</div>
        </div>
        <div class="c-fs24 c-fc-xblack c-w18 c-textAlign-c" v-if="scoringMethod==1">{{item.accuracy}}%</div>
        <div class="c-fs24 c-fc-xblack c-w18 c-textAlign-c" v-if="scoringMethod==2">{{item.totalpoins}}</div>
        <div class="c-fs24 c-fc-xblack c-w18 c-textAlign-c" v-if="scoringMethod==3">{{item.rightNum}}</div>
        <div class="c-fs24 c-fc-xblack c-w22 c-textAlign-r">{{item.ansTime}}</div>
      </div>
      <!-- <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getMore" v-if="is_page">
        加载更多&nbsp;>
      </div> -->
    </div>
    <loading-status-tem :noData="rankList.length == 0" :noDataText="'暂无结果'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
var isLoading = false;

export default {
  name: "ExaminationRank",
  components: {
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      myRanking: {},
      scoringMethod: -1,
      rankList: [],
      is_page: false,
      page: 1,
      paperMainId: -1
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("排行榜");// eslint-disable-line
    this.paperMainId = this.$route.query.paperMainId;
    this.page = 1;
    this.limit = 10;
    this.rankList = [];
    this.wechatShare();
    this.getMore();
  },
  deactivated() {

  },
  mounted() {
    // this.wechatShare();
  },
  methods: {
    getMore() {
      if (isLoading == true) {
        return;
      }

      let $this = this;
      isLoading = true;
      utilJs.getMethod(global.apiurl + 'exam/rankingList/' + this.paperMainId + '?page=' + this.page, function (res) {
        isLoading = false;
        $this.myRanking = res.myRank[0];

        if ($this.myRanking.ansTime > 59) {
          var min1 = Math.floor($this.myRanking.ansTime / 60);
          var sec1 = Math.floor($this.myRanking.ansTime % 60);
          $this.myRanking.ansTime = min1 + '分' + sec1 + '秒';
        } else {
          $this.myRanking.ansTime = $this.myRanking.ansTime + '秒';
        }

        $this.scoringMethod = res.scoringMethod;

        if ($this.scoringMethod == 1) {
          $this.myRanking.accuracy = Number($this.myRanking.accuracy * 100).toFixed(0);
        }

        for (var i = 0; i < res.rankingList.data.length; i++) {
          if ($this.scoringMethod == 1) {
            res.rankingList.data[i].accuracy = Number(res.rankingList.data[i].accuracy * 100).toFixed(0);
          }
          if (res.rankingList.data[i].ansTime > 59) {
            var min = Math.floor(res.rankingList.data[i].ansTime / 60);
            var sec = Math.floor(res.rankingList.data[i].ansTime % 60);
            res.rankingList.data[i].ansTime = min + '分' + sec + '秒';
          } else {
            res.rankingList.data[i].ansTime = res.rankingList.data[i].ansTime + '秒';
          }
        }
        $this.rankList = $this.rankList.concat(res.rankingList.data);
        $this.page = res.rankingList.data && (res.rankingList.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? (this.page + 1) : this.page;
        $this.is_page = res.rankingList.data && (res.rankingList.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
      },
        failRes => {
          isLoading = false;
        });
    },
    //分享
    wechatShare: function () {
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?paperMainId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?paperMainId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-ml60 {
  margin-left: 1.5rem;
}
.c-w14 {
  width: 14%;
}
.c-w22 {
  width: 22%;
}
.c-w45 {
  width: 45%;
}
.c-bg-rank {
  background: url(../../../assets/i/wap/exam/rank-bg.png) no-repeat top left;
  background-size: 100% 4.75rem;
}
.c-p-t120 {
  top: 3rem;
}
.shadow-rank {
  box-shadow: 0 4px 6px #e7f2fe;
}
</style>